<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" href="css/register.css">
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body onload="createCode()">
<div>
    <div id="t_div"><!--页头-->
        <div>
            <div id="d1">
                <h1>注册页面</h1>
            </div>
        </div>
    </div>
    <div id="b_div"><!--内容-->
        <div>
            <!--
            ************************************
            onfocus （获得焦点）和 onblur （失去焦点）
            ************************************
            -->
            <!--
                ***************************************************
                tedu异步请求未实现
                ***************************************************
            -->
            <form action="">
                <table >
                    <tr>
                        <td> <p>用户名:</p></td>
                        <td> <input id="username" class="cl" type="text" name="username"
                                    placeholder="手机号"></td><p class="pcolor">*</p>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_username"></span></td></tr>
                    <tr>
                        <td> <p>密码:</p></td>
                        <td>  <input class="cl" type="password" name="password" maxlength="11" id="password"
                                     placeholder="6~11位字母或数字组合,下划线">
                            </td><p class="pcolor pcolor1">*</p>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_password"></span></td></tr>
                    <tr>
                        <td> <p>确认密码:</p></td>
                        <td> <input class="cl" type="password" maxlength="11" id="repsword"
                                    placeholder="请确认密码">
                            </td><p class="pcolor pcolor2">*</p>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_repassword"></span></td></tr>
                    <tr>
                        <td> <p>昵称:</p></td>
                        <td> <input class="cl" type="text" maxlength="15" id="nickname" name="nickname"
                                    placeholder="昵称">
                            </td><p class="pcolor pcolor3">*</p>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_nickname"></span></td></tr>
                    <tr>
                        <td> <p>生日:</p></td>
                        <td> <input class="cl" type="date" maxlength="11" id="birth" name="birth"
                                    placeholder="昵称">
                            </td>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_birth"></span></td></tr>
                    <tr>
                        <td><p>验证码:</p></td>
                        <td><input class="cl" type="text" name="yz" maxlength="4" id="yanzheng"
                                   placeholder="请输入验证码" readonly="readonly">
                            </td><p class="pcolor pcolor4">*</p>
                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_yanzheng"></span></td></tr>
                </table>




<!--                &lt;!&ndash;<img id="iy" src="../images/register/yzm.png" alt="">&ndash;&gt;-->
<!--                <input type="text" id="checkCode" class="code"-->
<!--                       style="width: 55px;height: 25px; margin-top: 40px;margin-left: 50px; text-align: center "-->
<!--                       readonly="readonly" onpaste="return false" oncontextmenu="return false"-->
<!--                       oncopy="javascript:alert('不可复制');return false;" oncut="return false">-->
<!--                <span class="sa">看不清？</span>-->
<!--                <a class="sa" href="###" onclick="createCode()">换一张</a><br>-->
<!--                <span id="span_cl" style="margin-left: -170px"></span>-->
<!--                <input id="ag" type="radio" name="hobby" value="cy"><b> 我已阅读并同意</b>-->
<!--                <a id="lx" href="">《A.S爱美服务协议》</a><br>-->
<!--                <span id="span_ag" style="margin-left: 400px"></span>-->
                <input type="button" id="lo" value="注册">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    let flagName = false;
    let flagPw = false;
    let flagRpw = false;
    let flagNick = false;

    $("#username").blur(function () {
            let strName = $(this).val();
            let ret = /^[\d]{1,20}$/;
            if (ret.test(strName)){
                if (strName.length!=11){
                    $("#span_username").text("手机号长度有误")
                  flagName = false;
                }else {
                    flagName = true;
                    $("#span_username").text("")
                    axios.get("/check?username="+strName).then(function (response) {
                        if (response.data=="用户名可用"){

                            $("#span_username").css("color","green")
                        }else {

                            $("#span_username").css("color","red")
                        }
                        $("#span_username").text(response.data)


                    }).catch(function (err) {

                    })
                }
            }else {
                flagName = false;
                if (strName.length<1){
                    $("#span_username").text("用户名不能为空")
                }else
                    $("#span_username").text("用户名格式有误")
            }
    })
    $("#password").blur(function () {
        let strName = $(this).val();
        let ret = /^[a-zA-Z0-9][a-zA-Z0-9_?]{5,20}$/;
        if (ret.test(strName)){
            if (strName.length>11){
                flagPw = false;
                $("#span_password").text("密码长度有误")
            }else {
                flagPw = true;
                $("#span_password").text("")
            }
        }else {
            flagPw = false;
            if (strName.length<1){
                $("#span_password").text("密码不能为空")
            }else if (strName.length<6)
                $("#span_password").text("密码长度有误")
            else
                $("#span_password").text("密码格式有误")
        }
    })

    $("#repsword").blur(function () {
        let strName = $(this).val();
        let ret = /^[a-zA-Z0-9][a-zA-Z0-9_?]{5,20}$/;
        if (ret.test(strName)){
            if (strName.length>11){
                flagRpw = false;
                $("#span_repassword").text("密码长度有误")
            }else {
                if ($.trim($("#repsword").val())==$.trim($("#password").val())){
                    // alert($("#repsword").val()+""+$("#password").val())
                    flagRpw = true;
                    $("#span_repassword").text("")
                }else {
                    flagRpw = false;
                    $("#span_repassword").text("与原密码不匹配")
                }
            }
        }else {
            flagRpw = false;
            if (strName.length<1){
                $("#span_repassword").text("密码不能为空")
            }else if (strName.length<6)
                $("#span_repassword").text("密码长度有误")
            else
                $("#span_repassword").text("密码格式有误")

        }
    })

    // $("#nickname").blur(function () {
    //     let strName = $(this).val();
    //     let ret = /^[a-zA-Z][a-zA-Z0-9_]{2,20}$/;
    //     if (ret.test(strName)){
    //         if (strName.length>11){
    //             flagNick = false;
    //
    //             $("#span_nickname").text("密码长度太长")
    //         }else {
    //                 $("#span_repassword").text("")
    //             flagNick = true;
    //         }
    //     }else {
    //         flagNick = false;
    //         if (strName.length<1){
    //             $("#span_nickname").text("昵称不能为空")
    //         }else if (strName.length<3)
    //             $("#span_nickname").text("昵称长度太短")
    //         else
    //             $("#span_nickname").text("昵称格式有误")
    //
    //     }
    // })

    // $("#nickname").blur(function () {
    //     let strName = $(this).val();
    //     let ret = /^[a-zA-Z][a-zA-Z0-9_]{2,20}$/;
    //     if (ret.test(strName)){
    //         if (strName.length>11){
    //             $("#span_nickname").text("密码长度太长")
    //         }else {
    //             $("#span_repassword").text("")
    //         }
    //     }else {
    //         if (strName.length<1){
    //             $("#span_nickname").text("昵称不能为空")
    //         }else if (strName.length<3)
    //             $("#span_nickname").text("昵称长度太短")
    //         else
    //             $("#span_nickname").text("昵称格式有误")
    //
    //     }
    // })
    $("#nickname").blur(function () {
        let strName = $(this).val();
        flagNick = false;
        if (strName.length>11){
            $("#span_nickname").text("昵称长度太长")
        }else if (strName.length<1){
            $("#span_nickname").text("昵称不能为空")
        }else if (strName.length<3)
            $("#span_nickname").text("昵称长度太短")
        else if (strName.length<=11){
            $("#span_nickname").text("")
            flagNick = true
        }
        else
            $("#span_nickname").text("昵称格式有误")
    })
    $("#birth").blur(function () {
            alert($(this).val())
    })
    $(function () {

        // if (strName==""){
        //     let myDate = new Date();
        //     let year=myDate.getFullYear();        //获取当前年
        //     let month=myDate.getMonth()+1;   //获取当前月
        //     let date=myDate.getDate();            //获取当前日
        //     strName.val((year)+"-"+(month)+"-"+(date))
        // }
        document.getElementById('birth').valueAsDate = new Date();
        // let strName = $("#birth").val();
        // alert(strName)
    })
    $("#yanzheng").blur(function () {
        let strName = $(this).val();
        let ret =/^[a-zA-Z0-9][a-zA-Z0-9]{3}$/;
        if (ret.test(strName)){
                $("#span_yanzheng").text("")
        }else {
            if (strName.length<1){
                $("#span_yanzheng").text("验证码不能为空")
            }else if (strName.length<4)
                $("#span_yanzheng").text("验证码长度太短")
            else
                $("#span_yanzheng").text("验证码格式有误")
        }
    })

    var code;
    function createCode(){
        code = '';//首先默认code为空字符串
        var codeLength = 4;//设置长度，这里看需求，我这里设置了4
        var codeV = $("#yanzheng");
        //设置随机字符
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
        for(var i = 0; i < codeLength; i++){ //循环codeLength 我设置的4就是循环4次
            var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36
            code += random[index];  //字符串拼接 将每次随机的字符 进行拼接
        }
        codeV.val(code);//将拼接好的字符串赋值给展示的Value
    }


    $("#lo").click(function () {
        if (flagName&&flagPw&&flagNick&&flagRpw){
            let data = new FormData($("form")[0])
            axios.post("/reg",data).then(function (response) {
                switch (response.data) {
                    case 1:
                        location.href="login.html";
                        break;
                }

            }).catch(function (err) {
                alert(err)
            })
        }else {
            alert("请完善填写信息")
        }

    })
</script>
</html>